<template>
	<view class="content margin-bottom">

		<Loading class="loading-box" v-show="!isLoading" isStatus='load'></Loading>

		<view class="head">
			<cu-custom bgColor="custom-top" :isBack="true" textRight="true" type="custom-recuit">
				<block slot="backText">
					<view class="titilestyle text-white">
						{{title}}
					</view>
				</block>
			</cu-custom>
			<view class="card padding-tb-sm padding-lr flex justify-between " v-if="member.has_card==0"
				@click="jumpTo('./recharge?shop='+JSON.stringify(shopInfo))">
				<view class="left flex flex-direction">
					<text class="text-one  padding-tb-xs text-bold  basis-xll text-cut">keep fit with exercise</text>
					<text class="text-white text-two padding-bottom-xs   basis-xll text-cut">加入我们 开启健康生活</text>
					<text class="text-green  padding-tb-xs text-bold basis-xll">立即加入 >></text>
				</view>
				<image :src="resDomain+'share.png'" mode=""></image>
			</view>
			<view class="padding-tb-sm padding-lr flex justify-between member " v-if="member.has_card==1">
				<view class="left flex flex-direction ">
					<text class=" padding-tb-xs   basis-xll text-sno text-cut">keep fit with exercise</text>
					<text class=" padding-bottom-xs   basis-xll text-title text-cut">与其计划明天 不如现在开始</text>
					<view class="flex justify-between  padding-tb-xs  basis-xll text-time">
						<text>会员到期时间：{{ filtertime(member.member_at) || ""}}</text>
						<text class="text-bold xufei text-right"
							@click="jumpTo('./recharge?shop='+JSON.stringify(shopInfo))">立即续费 >></text>
					</view>
				</view>
				<image :src="resDomain+'card.png'" mode=""></image>
			</view>
		</view>

		<view class="flex bg-white item align-center " v-if="shop">

			<image class="radius lg bg-gray logo" :src="shop.logo" mode="aspectFill"></image>
			<view class="right margin-left flex flex-direction  justify-around">
				<view class="text-cut text-bold shop-name">{{shop.shop_name || ""}}</view>
				<view class="text-cut text-gray margin-top-sm text-over"><text class="cuIcon-locationfill "></text>
					{{shop.address || ""}}
				</view>
			</view>

		</view>
		<view class="cu-bar cu-item  margin-top " v-if="videoList.length>0">
			<view class="action  text-bold">
				精选视频
			</view>
			<view class=" more " @click="jumpTo('./allVideo?shop_id='+shop.shop_id)">
				更多 <text class="cuIcon-right"></text>
			</view>
		</view>


		<view class="row-list flex justify-between flex-wrap">
			<view class=" thumb-box" v-for="(video,index) in videoList" :key="index"
				@click="jumpTo('./info?id='+video.video_id+'&type=video')">
				<view class="img-box middle">
					<image :src="video.logo" mode="aspectFill"></image>
					<view class="mask">

					</view>
					<text class="cuIcon-videofill"></text>

				</view>
				<view class=" video-title padding-sm  text-cut">
					{{video.title}}
				</view>
			</view>

		</view>

		<view class="cu-bar cu-item  margin-top" v-if="article.length>0">
			<view class="action  text-bold">
				健身小贴士
			</view>
			<view class=" more" @click="jumpTo('./allArticle?shop_id='+shop.shop_id)">
				更多 <text class="cuIcon-right"></text>
			</view>
		</view>

		<view class="column-list bg-white margin-top-sm  flex justify-between" v-for="(item,index) in article"
			:key="index" @click="jumpTo('./info?id='+item.article_id+'&type=article')">
			<image :src="item.logo" mode="aspectFill" class="radius " @error="errorImg(index)"></image>
			<view class="right flex flex-direction justify-around">
				<view class="line-2 text-bold article-title">{{item.title}}</view>
				<view class="article-time">{{changeTime(item.created_at).after}}</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {

		data() {
			return {
				title: "健身",
				shop: {
					logo: "",
					shop_name: "",
					address: ""
				},
				member: {
					has_card: 0
				},
				resDomain: this.resDomain + "/gym/static/img/",
				article: [],
				videoList: [],
				isLoading: false,
				shopInfo: null


			}
		},

		onShow() {
			let area_id = uni.getStorageSync("area_id");
			this.apiRequest('/buyer/SportShop', {
				area_id: area_id,
			}, 0, 'get').then(res => {
				(res.code == 200) ? (() => {
					this.shop = res.data;
					this.shopInfo = {
						logo: this.shop.logo,
						shop_name: this.shop.shop_name,
						address: this.shop.address,
						shop_id: this.shop.shop_id
					}
					this.article = this.shop.article;
					this.videoList = this.shop.video;
					this.isLoading = true;
					let authorization = uni.getStorageSync('authorization');
					if (authorization) {
						this.getData()
					}

				})() : (() => {
					uni.showModal({
						content: res.msg,
						showCancel: false,
						success: () => {
							uni.navigateBack({
								delta: 1
							})
						}
					})

				})();
			})
		},
		methods: {
			filtertime(time) {
				time = time.split(" ");

				return time[0];
			},
			/**
			 * 时间的格式转换
			 * @param {Object} time
			 */
			changeTime1(time) {
				var d = new Date(time);
				let year1 = parseInt(d.getFullYear() - 1970);
				let year = (year1 == 0) ? "" : year1 + "年";
				var month = parseInt((time / 1000 / 60 / 60 / 24 / 30) % 12); //月
				let mon = (year1 > 0 || month == 0) ? "" : month + "月";
				var day1 = parseInt((time / 1000 / 60 / 60 / 24) % 30); //天数
				let day = (month > 0 || year1 > 0 || day1 == 0) ? "" : day1 + "天";
				var hour = parseInt((time / 1000 / 60 / 60) % 24); //小时
				let hours = (month > 0 || year1 > 0 || day1 > 0 || hour == 0) ? "" : hour + "小时";
				var minute = parseInt((time / 1000 / 60) % 60); //  分钟
				let min = (month > 0 || year1 > 0 || day1 > 0 || minute == 0 || hour > 0) ? "" : minute + "分钟";
				let sec = parseInt((time / 1000) % 60); //秒
				sec = (month > 0 || year1 > 0 || day1 > 0 || minute > 0 || hour > 0 || sec == 0) ? "" : sec + "秒";
				let array = {
					after: year + mon + day + hours + min + sec + "前"
				}
				return array;
			},
			changeTime(time) {
				let end = (new Date(time.replace(/-/g, '/'))).getTime();
				let current = (new Date()).getTime();
				let l = parseInt(current - end);
				return this.changeTime1(l);
			},
			//处理加载错误的图
			errorImg(...dat) { //图片加载失败给出默认图
				this.article[dat[0]].logo = this.resDomain + "/static/img/error.png";
			},
			getData() {
				//会员卡
				this.apiRequest('/buyer/SportCard', {
					shop_id: this.shop.shop_id,
				}, 0, 'get').then(res => {
					(res.code == 200) ? (() => {
						this.member = res.data;
					})() : "";
				})
			},
			jumpTo(url) {
				let authorization = uni.getStorageSync('authorization');
				if (!authorization) {
					uni.showToast({
						icon:"none",
						title: "你还未登录，请先登录"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "../../pages/user/login"
						})
					}, 1000);


					return false;
				}

				uni.navigateTo({
					url: url
				})
			}

		}

	}
</script>



<style lang="scss">
	.line-2 {
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
	}

	.content {
		$l: calc(100vw*(40/750));
		$w: calc(100vw*(670/750));


		.head {
			width: 100vw;
			min-height: calc(100vw*(380/750));
			position: relative;
			overflow: hidden;

			.card {
				width: $w;
				height: calc(100vw*(240/750));
				background-color: #3B3C45;
				margin: calc(100vw*(40/750));
				border-radius: 20rpx;
				position: relative;

				.left {
					width: $w;
					font-size: calc(100vw*(24/750));

					.text-one {
						font-weight: 500;
						color: #222327;
					}

					.text-two {
						font-size: calc(100vw*(36/750));
						font-weight: 800;
					}

					z-index: 1;
				}

				image {
					position: absolute;
					right: 2%;
					z-index: 0;
					max-width: calc(100vw*(250/750));
					max-height: calc(100vw*(200/750));
				}
			}

			.member {
				width: $w;
				height: calc(100vw*(240/750));
				background-image: linear-gradient(to right, #DCB473, #F2DCA9);
				border-radius: 20rpx;
				margin: calc(100vw*(40/750));
				position: relative;

				.left {
					width: $w;
					font-size: calc(100vw*(24/750));

					.text-sno {
						color: #8F571F;
						opacity: 0.5;
						font-size: calc(100vw*(28/750));
						font-weight: 500;
					}

					.text-title {
						font-weight: 800;
						color: #8F571F;
						font-size: calc(100vw*(36/750));
					}

					.text-time {
						font-weight: 500;
						color: #8F571F;

					}

					z-index: 1;
				}

				.xufei {
					font-weight: 800;
					color: #8F571F;

				}

				image {
					position: absolute;
					right: 0;
					z-index: 0;
					top: calc(100vw*(60/750));
					max-width: calc(100vw*(180/750));
					max-height: calc(100vw*(150/750));
				}

			}

		}

		.head::after {
			content: '';
			width: 140vw;
			height: calc(100vw*(380/750));
			position: absolute;
			top: 0;
			left: -20vw;
			z-index: -1;
			border-radius: 0 0 90% 90%;
			background-color: #323339;
		}

		.item {
			width: $w;
			height: calc(100vw*(162/750));
			margin-left: $l;
			border-radius: 20rpx;
			padding: calc(100vw*(20/750));

			.logo {
				width: calc(100vw*(112/750));
				height: calc(100vw*(112/750));
			}

			.right {
				.shop-name {
					font-size: calc(100vw*(36/750));
					font-weight: 800;
					color: #222327;
				}

				font-size: calc(100vw*(24/750));
				font-weight: 500;
				color: #999999;

			}

			.cuIcon-locationfill {
				color: #29C26D;
			}
		}

		.cu-item,
		.row-list {
			.action {
				font-size: calc(100vw*(32/750));
				font-weight: 800;
				color: #333333;
			}

			.more {
				font-size: calc(100vw*(24/750));
				font-weight: 500;
				color: #999999;
			}

			width: $w;
			margin-left: $l;

			.thumb-box {
				width: calc(100vw*(325/750));
				min-height: calc(100vw*(217/750));

				.video-title {
					font-size: calc(100vw*(24/750));
					font-weight: 800;
					color: #333333;
				}

				.img-box {
					position: relative;
					width: inherit;
					border-radius: 20rpx;
					height: calc(100vw*(217/750));

					image {
						position: absolute;
						top: 0;
						z-index: 0;
						width: calc(100vw*(325/750));
						height: calc(100vw*(217/750));
						border-radius: 20rpx;

					}

					.mask {
						position: absolute;
						width: calc(100vw*(325/750));
						height: calc(100vw*(217/750));
						z-index: 1;
						top: 0;
						border-radius: 20rpx;
						background-color: rgba(59, 60, 69, 0.5);
					}

					.cuIcon-videofill {
						width: calc(100vw*(56/750));
						height: calc(100vw*(56/750));
						color: #29C26D;
						font-size: calc(100vw*(56/750));
						z-index: 2;
					}

				}

			}
		}

		.column-list {
			width: $w;
			margin-left: $l;
			padding: calc(100vw*(20/750));
			height: calc(100vw*(200/750));
			border-radius: 20rpx;

			image {
				width: calc(100vw*(250/750));
				height: calc(100vw*(160/750));
				border-radius: 20rpx;
			}

			.right {
				height: calc(100vw*(160/750));
				width: calc(100vw*(350/750));

				.article-title {
					font-size: calc(100vw*(32/750));
					font-weight: 800;
					color: #333333;
				}

				.article-time {
					font-size: calc(100vw*(20/750));
					font-weight: bold;
					color: #999999;
				}
			}
		}

	}
</style>
